- ajax = local_assigns.fetch(:ajax, false)
- title = local_assigns.fetch(:title, s_('AccessTokens|Add a %{type}') % { type: type })
- prefix = local_assigns.fetch(:prefix, :personal_access_token)
- description_prefix = local_assigns.fetch(:description_prefix, prefix)
- help_path = local_assigns.fetch(:help_path)
- resource = local_assigns.fetch(:resource, false)
- access_levels = local_assigns.fetch(:access_levels, false)
- default_access_level = local_assigns.fetch(:default_access_level, false)

%h4.gl-mt-0
  = title

= gitlab_ui_form_for token, as: prefix, url: path, method: :post, html: { id: 'js-new-access-token-form', class: 'js-requires-input' }, remote: ajax do |f|
  = form_errors(token)

  .form-group
    = f.label :name, s_('AccessTokens|Token name'), class: 'label-bold'
    = f.text_field :name, class: 'form-control gl-form-input gl-max-w-80', required: true, data: { qa_selector: 'access_token_name_field' }, :'aria-describedby' => 'access_token_help_text'
    %span.form-text.text-muted#access_token_help_text
      - if resource
        - resource_type = resource.is_a?(Group) ? "group" : "project"
        = s_("AccessTokens|For example, the application using the token or the purpose of the token. Do not give sensitive information for the name of the token, as it will be visible to all %{resource_type} members.") % { resource_type: resource_type }
      - else
        = s_("AccessTokens|For example, the application using the token or the purpose of the token.")

  .js-access-tokens-expires-at{ data: expires_at_field_data }
    = f.text_field :expires_at, class: 'gl-datepicker-input form-control gl-form-input', placeholder: 'YYYY-MM-DD', autocomplete: 'off', data: { js_name: 'expiresAt' }

  - if resource
    .form-group
      = label_tag :access_level, s_("AccessTokens|Select a role"), class: "label-bold"
      .select-wrapper.gl-form-input-md
        = select_tag :"#{prefix}[access_level]", options_for_select(access_levels, default_access_level), class: "form-control select-control", data: { qa_selector: 'access_token_access_level' }
        = sprite_icon('chevron-down', css_class: "gl-icon gl-absolute gl-top-3 gl-right-3 gl-text-gray-200")

  .form-group
    %b{ :'aria-describedby' => 'select_scope_help_text' }
      = s_('AccessTokens|Select scopes')
    %p.text-secondary#select_scope_help_text
      = s_('AccessTokens|Scopes set the permission levels granted to the token.')
      = link_to _("Learn more."), help_path, target: '_blank', rel: 'noopener noreferrer'
    = render 'shared/tokens/scopes_form', prefix: prefix, description_prefix: description_prefix, token: token, scopes: scopes, f: f

  .gl-mt-3
    = f.submit s_('AccessTokens|Create %{type}') % { type: type }, data: { qa_selector: 'create_token_button' }, pajamas_button: true
    = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
      = _('Cancel')
